<template>
  <div>
 <div>
      <el-form
        ref="form"
        :model="queryParams"
        inline=true
        label-width="80px"
        class="demo-form-inline"
      >
        <el-form-item label="用户昵称:">
          <el-input
            v-model="queryParams.uname"
            placeholder="输入名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="用户账号:">
          <el-input
            v-model="queryParams.uid"
            placeholder="输入账号"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>


       <div>
      <el-table :data="pageBean.beanList" style="width: 100%">
        <el-table-column prop="id"   label="用户ID" width="150"/>

        <el-table-column prop="uid" label="用户账号" width="150" />
       <el-table-column   prop="userdetails.uname" label="用户昵称" width="150"/>
        <el-table-column prop="member" label="会员等级" width="150" />
        <el-table-column prop="auth" label="认证状态" width="150"/>
        <el-table-column prop="amout" label="贷款总额" width="150" />
        <el-table-column prop="order" label="订单数量" width="150"/>
        <el-table-column prop="overdue" label="逾期金额" width="150" />
        <el-table-column prop="list" label="黑白名单" width="150"/>
        <el-table-column prop="statu" label="账户状态" width="150" />

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              icon="el-icon-edit"
             
              >查看</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-delete"
           
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
      <!-- 分页 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageBean.pageIndex"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageBean.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBean.totalRecord"
      >
      </el-pagination>
   
    </div>
     <!-- 模态框 -->
<div>
  
<!-- 模态框 -->
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <!-- 加入自己的表单  inline="true"-->
<el-form ref="storeForm"   :rules="rules" :model="storeForm  ">
       <el-form-item label="用户ID: " prop="uid">
         {{storeForm.uid}}
          <!-- <el-input v-model="storeForm.uid"></el-input> -->
        </el-form-item>

        <el-form-item label="职业" prop="uoccupation">
          <!-- <el-input v-model="storeForm.uoccupation"></el-input> -->
          {{storeForm.uoccupation}}
        </el-form-item>

        <el-form-item label="性别" prop="ugender">
          <!-- <el-input v-model="storeForm.ugender"></el-input> -->
          {{storeForm.ugender}}
        </el-form-item>

        <el-form-item label="昵称" prop="uname">
          <!-- <el-input v-model="storeForm.uname"></el-input> -->
          {{storeForm.uname}}
        </el-form-item>

        <el-form-item label="地址" prop="uaddress">
          <!-- <el-input v-model="storeForm.uaddress"></el-input> -->
          {{storeForm.uaddress}}
        </el-form-item>

        <el-form-item label="注册时间" prop="udata">
          <!-- <el-input v-model="storeForm.udata"></el-input> -->
          {{storeForm.udata}}
        </el-form-item>

        <el-form-item label="头像" prop="uimage">
          <!-- <el-input v-model="storeForm.uimage"></el-input> -->
          {{storeForm.uimage}}
        </el-form-item>

        <el-form-item label="经纬度" prop="ulongitude">
          <!-- <el-input v-model="storeForm.ulongitude"></el-input> -->
          {{storeForm.ulongitude}}
        </el-form-item>
        </el-form>
<div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        </div>
      
    </el-dialog>
</div>
        
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      pageBean: {
        beanList: [],
        pageIndex: 0,
        pageSize: 0,
        totalRecord: 0,
        totalPage: 0,
      },
      //查询条件
      queryParams: {
        uname: "",
        uid: ""
      },
        storeForm:{
          uid: "",
          uoccupation: "",
          ugender: "",
          uname: "",
          uaddress: "",
          udata: "",
          uimage: "",
          ulongitude: "",

        },

      dialogFormVisible: false,
    };
  },
  //   使用生命周期方法在页面加载完成后显示数据
  created() {
    this.getUserinfoALL();
     
  },
  methods: {
    handleEdit(index, row) {
        //展示模态框
      this.dialogFormVisible=true;
      //属性赋值 回显在模态框中
      this.storeForm={...row};
      console.log(index, row);

      this.$axios
        .get("http://localhost:8601/consumer/selectByUid", {
          params: {
            uid: row.uid,            
          },
        })
        .then((resp) => {
          this.storeForm = resp.data;
          console.log(resp);
        });


    },
    handleDelete(index, row) {
      console.log(index, row);
      console.log(row.uid)
      if(confirm("此操作将永久删除, 是否继续?")){
//调用删除方法
      
        this.$axios.delete("http://localhost:8601//consumer/deleteUser/"+row.uid,
        )
        .then(resp => {
           this.$message({
            type: 'success',
            message: '删除成功!'
          });
          console.log(resp);
          this.getUserinfoALL();
        });
      }else{
        this.$message({
            type: 'info',
            message: '已取消删除'
          });       
      }


    },
    getUserinfoALL() {
      this.$axios
        .get("http://localhost:8601/consumer/selectUserdetailsAll", {
          params: {
            uname: this.queryParams.uname,
            uid: this.queryParams.uid,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
          },
        })
        .then((resp) => {
          this.pageBean = resp.data.data;
          console.log(resp.data);
        });
    },
    onSubmit() {

this.getUserinfoALL();

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getUserinfoALL();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getUserinfoALL();
    },
  },
};
</script>

<style>

</style>